<template>
  <div class="box">
    <h3>父组件</h3>
    <h4>学校地址：{{address}}</h4>
    <!-- 【使用v-model】实现了双向数据绑定：<input type="text" v-model="address"><br> -->
    <!-- 【不使用v-model】实现了双向数据绑定：<input type="text" :value="address" @input="address = $event.target.value"> -->

    <!-- <BeautyInput :value="address" @input="address = $event"/> -->
    
    <BeautyInput v-model="address"/>
    
  </div>
</template>

<script>
  import BeautyInput from './BeautyInput.vue'

	export default {
		name: "Index",
    components:{BeautyInput},
    data() {
      return {
        address:'宏福科技园'
      }
    },
	};
</script>

<style lang="less" scoped>
.box {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
